/* 每一屏默认采用flex布局 */
.section > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

/* 设置一组特定的div元素，使其拥有flex布局 */
.flex-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
}

/* 第一块屏 */
#section0 {
  background-image: linear-gradient(to bottom, #121212, #334);
  -webkit-background-image: linear-gradient(to bottom, #121212, #334);
  -moz-background-image: linear-gradient(to bottom, #121212, #334);
}
/* 绘制出右上角的三角形 */
#section0 .tr-angle {
  width: 100px;
  height: 100px;
  transform-origin: center;
  transform: rotate(45deg);
  border: 2px solid #4cc9f0;
  position: absolute;
  top: -50px;
  right: -50px;
  transition: all 0.3s ease-out;
}
/* 用before写出文字 */
#section0 .tr-angle::before {
  content: "Notes";
  font-size: 18px;
  position: absolute;
  bottom: 0;
  left: 26px;
  text-align: center;
}
#section0 .tr-angle:hover {
  background-color: #4cc9f0;
  box-shadow: 10px 10px 100px 6px rgba(76, 201, 240, 1);
  -webkit-box-shadow: 10px 10px 100px 6px rgba(76, 201, 240, 1);
  -moz-box-shadow: 10px 10px 100px 6px rgba(76, 201, 240, 1);
  color: #fff;
}

/* 第二块屏 */
#section1 {
  background-color: #ddd;
}
#section1 .box {
}


/* 固定图标 */
#fixed_logo {
  width: 6%;
  height: 13%;
  position: absolute;
  right: 1%;
  bottom: 10%;
  background: url(../img/x_logo.jpg) no-repeat;
  background-size: cover;
  background-position-x: 45%;
}
#fixed_logo > a {
  width: 100%;
  height: 100%;
  display: block;
}